import * as React from "react";
import { View, Text, Button } from "react-native";
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

//
const HomeScreen=({navigation})=>{
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' ,backgroundColor:'#ccc'}}>
      <Text>Home Screen</Text>
      <Button title={'跳转'} onPress={()=>{navigation.navigate('Deatil',{
        itemID:1901,
        data:'移动'
      })}}></Button>
    </View>
  );
}
const DetailScreen=({route,navigation})=>{
  const {itemID}=route.params;
  const {data}=route.params;
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center',backgroundColor:'#61ce70' }}>
      <Text>Home Screen</Text>
      <Text>{JSON.stringify(itemID)}</Text>
      <Text>{JSON.stringify(data)}</Text>
    </View>
  );
}

//调用创建导航
const Stack=createStackNavigator();

const App1=()=>{
  return(
    <NavigationContainer>
      <Stack.Navigator>
        {/*导航器对应的页面*/}
        <Stack.Screen name={"Home"} component={HomeScreen} options={{
          title: 'My home',
          headerStyle: {
            backgroundColor: '#f4511e',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}/>
        <Stack.Screen name={'Deatil'} component={DetailScreen}/>
      </Stack.Navigator>
    </NavigationContainer>
  )
}

export default App1;
